<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function () {
            $("input:eq(0)").click(function () {
                console.log($("ul").children().length);//获取当前子元素的jQuery对象集合
                $("ul").children().css("background", "red");
            });
            $("input:eq(1)").click(function () {
                // console.log($("li").parent().length);//获取父元素的jQuery对象
                // console.log($("li").parent()[0]);//DOM对象
                console.log($("li").parents().length);
                console.log($("li").parents());//获取祖先元素ul、body、html
            });
            $("input:eq(2)").click(function () {

                // 同级别紧邻在ul后面的元素
                $("ul").next().css("background", "red");
            });
            $("input:eq(3)").click(function () {

                // 同级别紧邻在ul后面的元素
                $("ul").prev().css("background", "blue");
            });
            $("input:eq(4)").click(function () {

                // 同级别紧邻在ul后面的元素
                $("ul").siblings().css("background", "blue");
                // console.log( $("ul").siblings());


                // 工具函数each(),可以用来遍历数组、对象等
                $.each( $("ul").siblings(),function(index,item){
                    // console.log(index);//索引
                    // console.log(item);//DOM对象
                });



                // 使用成员函数each(),用来遍历jQuery对象，jQuery对象.each(函数)
                $("ul").siblings().each(function(index,item){
                    // console.log(index);//索引
                    // console.log(item);//DOM对象
                    console.log(this===item);
                });


            

            });
        });
    </script>
</head>

<body>
    <input type="button" value="遍历子元素">
    <input type="button" value="遍历前辈元素">
    <input type="button" value="遍历同级别的紧邻其后元素">
    <input type="button" value="遍历同级别的紧邻其前元素">
    <input type="button" value="遍历同级别的紧邻其前后的元素">
    <p>p01</p>
    <p>p02</p>
    <p>p03</p>
    <p>p04</p>
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <span>ul中的span</span>
    </ul>
    <p>sss</p>
    <div>div01</div>
    <div>div02</div>
    <div>div03</div>
    <div>div04</div>
    <div>div05</div>
</body>

</html>